<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 400px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .header {
      text-align: center;
      margin-bottom: 15px;
      color: #333;
    }
    
    .status {
      background: #f8f9fa;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 15px;
      border: 1px solid #e9ecef;
    }
    
    .status-item {
      margin: 5px 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .config-section {
      border-top: 1px solid #eee;
      padding-top: 15px;
      margin-bottom: 15px;
    }
    
    .config-form {
      background: #f8f9fa;
      padding: 10px;
      border-radius: 5px;
      margin-top: 10px;
    }
    
    .tabs {
      display: flex;
      border-bottom: 1px solid #ddd;
      margin-bottom: 15px;
    }
    
    .tab-button {
      flex: 1;
      padding: 12px 15px;
      border: none;
      background: #f8f9fa;
      cursor: pointer;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      color: #6c757d;
      transition: all 0.2s ease;
    }
    
    .tab-button.active {
      background: white;
      border-bottom-color: #495057;
      color: #495057;
      font-weight: 500;
    }
    
    .tab-button:hover {
      background: #e9ecef;
      color: #495057;
    }
    
    .tab-content {
      position: relative;
    }
    
    .tab-panel {
      display: none;
    }
    
    .tab-panel.active {
      display: block;
    }
    
    .icon-button {
      background: #007bff;
      color: white;
      border: none;
      border-radius: 3px;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 12px;
      min-width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .icon-button:hover {
      background: #0056b3;
    }
    
    .url-display {
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      vertical-align: middle;
      flex: 1;
      /* font-family: 'Courier New', monospace; */
      /* font-size: 12px; */
    }
    
    .status-label {
      font-weight: bold;
      color: #666;
    }
    
    .status-value {
      color: #333;
    }
    
    .success {
      color: #28a745;
    }
    
    .error {
      color: #dc3545;
    }
    
    .sites-section {
      border-top: 1px solid #eee;
      padding-top: 15px;
    }
    
    .site-item {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 5px 0;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    
    .site-item:hover {
      border-color: #adb5bd;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transform: translateY(-1px);
    }
    
    .site-enabled {
      background: #f8f9fa;
      border-left: 3px solid #28a745;
    }
    
    .site-disabled {
      background: #f8f9fa;
      border-left: 3px solid #dc3545;
      opacity: 0.6;
    }
    
    .site-disabled .site-name {
      color: #6c757d;
    }
    
    .site-disabled .site-auth {
      color: #adb5bd;
    }
    
    .site-disabled .site-last-export {
      color: #adb5bd;
    }
    
    .site-info {
      flex: 1;
    }
    
    .site-name {
      font-weight: bold;
      color: #333;
    }
    
    .site-domain {
      font-size: 12px;
      color: #666;
    }
    
    .site-auth {
      font-size: 12px;
      color: #666;
    }
    
    .site-last-export {
      font-size: 11px;
      color: #666;
      margin-top: 2px;
      /* font-style: italic; */
    }
    
    .site-item:hover .site-last-export::after {
      /* content: " (悬停查看操作)"; */
      color: #999;
      font-size: 10px;
    }
    
    .site-actions {
      display: none;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
      align-items: center;
    }
    
    .site-item:hover .site-actions {
      display: flex;
      opacity: 1;
    }
    
    .add-site-header {
      margin: 15px 0 10px 0;
      text-align: center;
    }
    
    .add-site-form, .edit-site-form {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #fafafa;
    }
    
    .edit-site-form {
      background: #fff3cd;
      border-color: #ffeaa7;
    }
    
    .form-group {
      margin: 8px 0;
    }
    
    .form-label {
      display: block;
      font-size: 12px;
      color: #666;
      margin-bottom: 3px;
    }
    
    .form-input {
      width: 100%;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 3px;
      font-size: 12px;
    }
    
    .button {
      background: #007bff;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      margin: 2px;
    }
    
    .button:hover {
      background: #0056b3;
    }
    
    .button.danger {
      background: #dc3545;
    }
    
    .button.danger:hover {
      background: #c82333;
    }
    
    .button.small {
      padding: 4px 8px;
      font-size: 11px;
      min-width: 50px;
      text-align: center;
    }
    
    .site-actions .button {
      margin: 0 3px;
      font-size: 16px;
      padding: 8px;
      min-width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #dee2e6;
      color: #6c757d;
      transition: all 0.2s ease;
    }
    
    .site-actions .button:hover {
      background: #f8f9fa;
      border-color: #adb5bd;
      color: #495057;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .site-actions .button.danger:hover {
      background: #f8d7da;
      border-color: #f5c6cb;
      color: #721c24;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Multi-Site Token Export</h3>
  </div>
  
  <div class="status">
    <div class="status-item">
      <span class="status-label">当前站点:</span>
      <span class="status-value" id="currentSite">检测中...</span>
    </div>
    <div class="status-item">
      <span class="status-label">服务地址:</span>
      <span class="status-value url-display" id="apiUrl" title="http://dev.com/multi-site-token-receiver.php">dev.com/multi-site-token-receiver.php</span>
    </div>
    <div class="status-item">
      <span class="status-label">重试配置:</span>
      <span class="status-value" id="retryConfig">2次重试，间隔5秒</span>
    </div>
  </div>
  
  <div class="tabs">
    <button class="tab-button active" data-tab="sites">站点配置</button>
    <button class="tab-button" data-tab="system">系统配置</button>
  </div>
  
  <div class="tab-content">
    <div id="sites-tab" class="tab-panel active">
      <div class="sites-section">
        <div id="sitesList"></div>
    
        <div class="add-site-header">
          <button id="showAddForm" class="button">+ 添加新站点</button>
          <!-- <button id="debugInfo" class="button" style="margin-left: 10px; background: #28a745;">调试信息</button> -->
        </div>
        
        <div class="add-site-form" id="addSiteForm" style="display: none;">
          <h5>添加新站点</h5>
          <div class="form-group">
            <label class="form-label">站点名称:</label>
            <input type="text" id="siteName" placeholder="例如: MyApp" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">域名:</label>
            <input type="text" id="siteDomain" placeholder="例如: myapp.com" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">认证类型:</label>
            <select id="authType" class="form-input">
              <option value="localStorage">localStorage</option>
              <option value="cookie">Cookie</option>
              <option value="sessionStorage">sessionStorage</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">认证字段名:</label>
            <input type="text" id="authKey" placeholder="例如: auth_token 或 tokens.access_token" class="form-input">
          </div>
          <button id="addSite" class="button">添加站点</button>
          <button id="testDataExtraction" class="button">测试数据提取</button>
        </div>
        
        <div class="edit-site-form" id="editSiteForm" style="display: none;">
          <h5>编辑站点</h5>
          <div class="form-group">
            <label class="form-label">站点名称:</label>
            <input type="text" id="editSiteName" placeholder="例如: MyApp" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">域名:</label>
            <input type="text" id="editSiteDomain" placeholder="例如: myapp.com" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">认证类型:</label>
            <select id="editAuthType" class="form-input">
              <option value="localStorage">localStorage</option>
              <option value="cookie">Cookie</option>
              <option value="sessionStorage">sessionStorage</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">认证字段名:</label>
            <input type="text" id="editAuthKey" placeholder="例如: auth_token 或 tokens.access_token" class="form-input">
          </div>
          <button id="saveEdit" class="button">保存修改</button>
          <button id="cancelEdit" class="button">取消</button>
        </div>
      </div>
    </div>
    
    <div id="system-tab" class="tab-panel">
      <div class="config-section">
        <div class="config-form">
          <div class="form-group">
            <label class="form-label">服务地址:</label>
            <input type="text" id="configApiUrl" placeholder="http://dev.com/multi-site-token-receiver.php" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">重试次数:</label>
            <input type="number" id="configRetryCount" min="0" max="10" value="2" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">重试间隔(秒):</label>
            <input type="number" id="configRetryDelay" min="1" max="60" value="5" class="form-input">
          </div>
          <button id="saveConfig" class="button">保存配置</button>
        </div>
      </div>
    </div>
  </div>
  
  <script src="site-config.js"></script>
  <script src="popup.js"></script>
</body>
</html> 